<template>
	<view class="userInfoContent">
		<view class="userSm">
			{{userInfoObject.intro || '他还没有简介'}}
		</view>
		<view class="sexAddBrth">
			<!--。sexM男，sexW女-->
			<view class="list sexM" v-if="userInfoObject.sex == 1">男</view>
			<view class="list sexW" v-if="userInfoObject.sex == 2">女</view>
			<view class="list add" v-if="userInfoObject.address">{{userInfoObject.address}}</view>
			<view class="list brth" v-if="userInfoObject.birthday">{{userInfoObject.birthday}}</view>
		</view>
		
		<view class="numContent">
			<view class="list">
				<text class="sz">{{userInfoObject.praise_count_text}}</text>
				<text class="wb">获赞</text>
			</view>
			<view class="list">
				<text class="sz">{{userInfoObject.follow_count_text}}</text>
				<text class="wb">关注</text>
			</view>
			<view class="list">
				<text class="sz">{{userInfoObject.fans_count_text}}</text>
				<text class="wb">粉丝</text>
			</view>
		</view>
		
		<view class="zp">
			<view class="title">
				作品 &nbsp; {{userInfoObject.work_count_text}}
			</view>
			<scroll-view class="sView" :scroll-y="true" @scrolltolower="flash2">
			<view class="vContent">
				<view 
					class="vlist"
					v-for="(item,index) in videoList"
					:key="item.id"
					@click="goPlay(item,index)"
					:style="{'background-image': 'url(' + item.upload_work_cover.path_text +')'} ">
				
					<view class="dzNum">{{item.like_count || 0}}</view>
					
				</view>
				<view class="noClass" v-if="userInfoObject.work_count_text == 0">
					暂无作品
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {apiGetUserWorl} from '../../../../api/me.js'
	export default {
		props:{
			userInfoObject: {
				type: Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				videoList: [],
				tempVideoList: [],
				pageIndex: 1,
				pageSize: 10
			}
		},
		methods:{
			// 获取作品
			getVideoList() {
				var self = this
				if (self.userInfoObject.work_count == 0) {
					return
				}
				apiGetUserWorl({
					user_id: self.userInfoObject.user_id,
					page: self.pageIndex,
					page_size: self.pageSize
				}).then(r => {
					console.log('获取的作品', r)
					self.tempVideoList = r.data.data
					self.videoList = self.videoList.concat(r.data.data)
				})
			},
			flash2() {
				var self = this
				if (self.tempVideoList.length < self.pageSize) {
					return
				}
				self.pageIndex++
				self.getVideoList()
			},
			// 点击播放视频
			goPlay(item,index) {
				let data = {
					videoType:'myopus',
					page: parseInt((index + this.pageSize) / this.pageSize),
					pageSize:this.pageSize,
					videoIndex: (this.pageIndex - 1) * this.pageSize + index,
					params: JSON.stringify({user_id: this.userInfoObject.user_id})
				}
				this.$navTo.togo('/pages/glob/video/index',data)
			}
		},
		mounted() {
			var self = this
			setTimeout(() => {
				self.getVideoList()
			}, 300)
		}
	}
</script>

<style lang="scss" scoped>
	.userInfoContent {
		margin-top: 10rpx;
		width: 90%;
		margin-left: 4%;
		.userSm {
			color: #DDDBFB;
			font-size: 28rpx;
		}
		
		.sexAddBrth {
			margin-top: 40rpx;
			display: flex;
			justify-content: flex-start;
			.list:nth-child(n + 2) {
				margin-left: 16rpx;
			}
			.list {
				min-height: 36rpx;
				line-height: 36rpx;
				background-color: #1C1B2B;
				border-radius: 4rpx;
				text-align: center;
				color: #747384;
				font-size: 24rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				display: flex;
				align-items: center;
			}
			.sexM , .sexW{
				background-size: 20rpx 20rpx;
				background-position: 6rpx center;
				background-repeat: no-repeat;
				padding-left: 28rpx;
			}
			
			.sexW {
				background-image: url(../icon/iconW.png);
			}
			.sexM {
				background-image: url(../icon/iconM.png);
			}
		}
		.numContent {
			margin-top: 40rpx;
			display: flex;
			justify-content: flex-start;
			.list:nth-child(n + 2) {
				margin-left: 32rpx;
			}
			.list {
				.sz {
					color: #DDDBFB;
					font-size: 32rpx;
				}
				.wb {
					color: #434254;
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}
		}
		
		.zp {
			margin-top: 60rpx;
			.title {
				color: #DDDBFB;
				font-size: 32rpx;
			}
			
			.vContent {
				margin-top: 70rpx;
				width: 100%;
				height:  auto;
				display: flex;
				flex-wrap: wrap;
				
				.vlist {
					width: 30%;
					height: 300rpx;
					margin-bottom: 23.52rpx;
					margin-right: 5%;
					background-color: #1C1B2B;
					background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584953336468&di=56dcbf513fc9732f76cc5110cd00823d&imgtype=0&src=http%3A%2F%2Fvp1.mbsimg.com%2FProductImg%2F99%2F1402%2Fhuge%2F998016555-M1AR-04-H.jpg);
					background-repeat: no-repeat;
					background-size: cover;
					position: relative;
					.dzNum {
						position: absolute;
						bottom: 22rpx;
						margin-left: 22rpx;
						font-size: 24rpx;
						background-image: url(../icon/xh.png);
						background-repeat: no-repeat;
						background-position: left center;
						background-size: 28rpx 25rpx;
						padding-left: 36rpx;
						
					}
				}
				.vlist:nth-child(3n){
					margin-right: 0% !important;
				}
			}
		}
		
		.noClass {
			margin-top: 150rpx;
			width: 100%;
			text-align: center;
		}
	}
	
	.sView {
		height: 50vh;
		overflow-y: auto;
	}
</style>
